Skip to content

feat: add immersive mode to the map and earthquake replay - #653

Open
PiscesXD wants to merge 5 commits into
mainfrom
feat/map-immersive-mode
Open

feat: add immersive mode to the map and earthquake replay#653
PiscesXD wants to merge 5 commits into
mainfrom
feat/map-immersive-mode

Conversation

@PiscesXD

@PiscesXD PiscesXD commented Nov 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

這個 PR 做了什麼

地圖分頁與地震重播新增「沉浸式」模式：右上角一顆按鈕隱藏地圖的 UI 與底部導覽列，只留下地圖；退出鈕固定在右上角，Android 返回鍵也會先離開模式。進出都有 220ms 的淡出／滑入轉場。另外把 MapLibre 原生右下角的 attribution（i）按鈕移出畫面，授權文字仍留在「更多 → 資料來源」。

正式程式碼

  • lib/shared/map/map_immersive.dart：沉浸狀態控制器，以及兩個地圖頁共用的 220ms／easeOutCubic 轉場常數。地圖分頁用 app-wide 實例（shell 要同步收合底部導覽列）；重播用 page-scoped 實例，pop 後不影響地圖分頁。
  • lib/features/map/map_providers.dart、lib/bootstrap.dart：註冊地圖分頁的 MapImmersiveController。
  • lib/shared/map/map_scaffold.dart：圖例、右上控制列、指南針、時間軸在沉浸時淡出／滑出；時間軸保持 mounted（它有 GlobalKey 量測），隱藏時關掉 hit test／semantics／focus；退出 chip 畫在最上層，圖層 detail sheet 拉滿也蓋不住；PopScope 讓返回鍵先退出模式。sheet 圖層的底部 inset 也會跟著導覽列收起，停在系統安全區上方 AppSpacing.lg——強震監視器的狀態列既不會浮在導覽列原本的高度，也不會貼死 home indicator。
  • lib/shared/map/map_immersive_chrome.dart：把淡出／滑動與退出 chip 抽成 MapImmersiveChrome / MapImmersiveExitChip，兩個地圖頁共用，避免行為分叉。
  • lib/app/shell/main_shell.dart：沉浸時底部導覽列用同一個時間／曲線滑出；Home 的 sheet 拖曳仍直接跟隨，不經過動畫。
  • lib/features/earthquake/presentation/pages/report_replay_page.dart：重播頁的左上（返回／圖例／強度排名）、底部（EEW 卡／狀態列）、右上（底圖選單／指南針）都套同一套轉場；進入鈕在右上底圖選單左邊。
  • lib/shared/map/base_map.dart：MapLibre attribution（i）ornament 以負 margin 推出平台視圖，並在 iOS 著透明色（Android 對透明 tint 會退回預設色，所以 margin 才是主要手段）。
  • 12 個 ARB 語系新增 mapImmersive / mapImmersiveExit；重播頁沿用同一組字串。

測試

  • test/features/map/presentation/map_scaffold_test.dart：沉浸時圖例／圖層 chip／時間軸不可點、退出 chip 出現；110ms 檢查時間軸已位移、導覽列已部分移動，220ms 後完成（驗證是轉場，不是瞬間切換）；退出 chip 在拉滿的 detail sheet 之上仍可點；系統返回先退出模式；attribution 參數有鎖住；sheet 圖層在沉浸時往導覽列讓出的空間下移 40px（80px bar − 24px 系統 inset − 16px 停留）。
  • test/app/shell/main_shell_test.dart：導覽列在 110ms 時只移動一部分，300ms 後才完全離開，退出後回來。
  • test/features/earthquake/presentation/pages/report_replay_page_test.dart：重播頁進入後返回／圖例／底圖選單不可點、退出 chip 出現，退出後恢復；返回鍵留在重播頁而不是 pop。
  • test/shared/map/map_layer_switcher_test.dart、test/features/map/presentation/pages/map_page_test.dart：provider 與 API 調整。

相關 issue

怎麼驗

  • tool/check.sh：全部 gates 通過；完整測試 3,682 passed / 6 skipped（format + analyze、l10n 12 語系 parity、layering、storage、codegen、全套測試）。
  • tool/commit.sh：5 則 commit 全部通過格式 gate，0 behind origin/main。
  • tool/check/commits.sh origin/main..HEAD：commit gate: 4 commit(s) OK。
  • 實機：尚未 在 iOS／Android 實機或可互動模擬器上看過實際畫面，也還沒附前後截圖。attribution 的負 margin 是照 MapLibre iOS 6.28 的約束原始碼與 Android UiSettings.setMargins 路徑確認；仍請在實機上確認右下角不再出現（需要 hot restart／重新 build，hot reload 不會重建 platform view）。
  • 未動 OS 狀態列／系統導覽列：沉浸只收 app 自己的 chrome 與 shell 的底部導覽列。
  • 已知取捨：attribution 按鈕是 workaround（目前 pin 的 maplibre_gl fork 沒有 attributionButtonEnabled）。若 fork 之後新增這個選項，應改用正式參數。授權文字仍在「更多 → 資料來源」（© OpenStreetMap contributors）。
  • UI 截圖：待補（淺色／深色各一組）。

檢查清單

  • tool/check/commits.sh origin/main..HEAD 通過
  • 一個 commit 一件事（沉浸模式、attribution、轉場、重播各自獨立）
  • mise exec -- flutter analyze 與 mise exec -- flutter test 通過（以 repo 要求的 tool/dev/analyze.sh / tool/check.sh 執行）
  • 新的使用者可見字串都走 AppLocalizations，沒有寫死
  • CI 全部通過——PR 剛建立，等 gh pr checks
  • 有 UI 變更的話：用的是 AppSpacing / AppRadius / AppMotion，深色模式看過，文字對比度可接受——轉場使用 AppMotion.medium，深色模式尚未在實機確認

@PiscesXD
feat(map): add an immersive full-screen map mode
6a79366 
Platform: all

New(zh-Hant): 地圖右上角新增沉浸式按鈕，隱藏控制項與導覽列讓地圖佔滿螢幕
New(en-US): an immersive button on the map hides the controls and the navigation bar for a full-screen map
@PiscesXD
fix(map): hide MapLibre's attribution button in the corner
592f556 
Platform: all

Fix(zh-Hant): 地圖右下角的 MapLibre 資訊按鈕已移除
Fix(en-US): the MapLibre info button is gone from the map's bottom-right corner
@PiscesXD
feat(map): animate the immersive transition
469a58e 
Platform: all

Optimization(zh-Hant): 進出沉浸式地圖時有轉場動畫，不再瞬間切換
Optimization(en-US): entering and leaving immersive map mode animates instead of snapping
@PiscesXD
feat(eew): give the earthquake replay an immersive mode
27814b7 
Platform: all

New(zh-Hant): 地震重播也能進入沉浸式模式，隱藏介面並以同樣的轉場顯示地圖
New(en-US): the earthquake replay can enter immersive mode, hiding its chrome with the same transition
@PiscesXD PiscesXD mentioned this pull request Nov 2, 2026
Open
@codecov

codecov Bot commented Nov 2, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 97.97571% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 94.52%. Comparing base (cebd963) to head (519f6a5).

Files with missing lines Patch % Lines
...thquake/presentation/pages/report_replay_page.dart 96.03% 4 Missing ⚠️
lib/bootstrap.dart 0.00% 1 Missing ⚠️

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@PiscesXD
fix(map): drop sheet chrome into the hidden nav bar's space
519f6a5 
Platform: all

Fix(zh-Hant): 沉浸式地圖時，強震監視器面板會跟著底部導覽列往下收
Fix(en-US): the monitor panel follows the hidden navigation bar down in immersive mode
@lowrt lowrt added this to the V26.5 milestone Nov 3, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

size/XXL

Projects

None yet

Milestone

V26.5

Development

Successfully merging this pull request may close these issues.

[Idea]: 新增一個 沉浸式地圖的功能選項

2 participants

@PiscesXD @lowrt